<template>
	<div style="padding:0 37px 0 44px">	
		<div class="breadcrumb-father">
			<div class="new-breadcrumb">
				<router-link  :to="{path:'/welcome'}">
					<img src="../../../assets/imgs/Home.png" alt="">
				</router-link>
				<span>{{$t('mer.Client')}}</span>
				<span class="arrow">></span>
				<span>{{$t('opinion.SuggestionList')}}</span>
			</div>
		</div>

		<div class="card-table">
			<div class="card-table-title">
				<svg aria-hidden="true" class="svg-icon svg-title-icon">
					<use xlink:href="#icon-jiaoyiliushui"></use>
				</svg>
				<span>{{$t('opinion.SuggestionList')}}</span>
			</div>
			<!--搜索输入框-->
			<div class="search">
				<div class="search-input">
					<div class="date-wrapper">
						<label for="">{{$t('opinion.Date')}}</label>
						<div class="date-line"></div>
						<el-date-picker :editable=false clearable value-format="yyyy-MM-dd" class="filter-item" type="date" v-model="searchOpinionData.startDate"></el-date-picker>
					</div>

					<div>
						<label for=""></label>
						<el-date-picker :editable=false clearable value-format="yyyy-MM-dd" class="filter-item" type="date" v-model="searchOpinionData.endDate"></el-date-picker>
					</div>

					<div class="search-btn-group">
						<el-button class="blue-btn mini2-btn" @click="handleFilter(0)">{{$t('button.search')}}</el-button>
						<el-button class="blue-btn mini2-btn" @click='delSelect()'>{{$t('button.Reset')}}</el-button>
					</div>
				</div>
			</div>
			<!--交易流水表单-->
			<template>
				<div class="table-border">
					<div class="search-result-head">
						<span> {{ searchInfo }} </span>
						<span style="float:right;"><a href="javascript:void(0)" @click="refresh()" :title="$t('button.Refresh')"><icon-svg icon-class="shuaxin" id="refresh_icon"></icon-svg></a></span> 
					</div>
					<el-table border :data="opinionData" height=535 @cell-mouse-enter="showHandle" @cell-mouse-leave="hiddenHandle" v-loading="loading" :element-loading-text="$t('button.loading')" element-loading-background="rgba(255, 255, 255, 1)">
						<el-table-column type="index" fixed :label="$t('index.Number')" width="60"></el-table-column>
						<el-table-column prop="addedDate" :label="$t('opinion.Time')" width="180"></el-table-column>
						<el-table-column prop="merchantName" :label="$t('settlement.Merchant')" width="150"></el-table-column>
						<el-table-column prop="merchantNumber" :label="$t('settlement.MerchantID')" width="150"></el-table-column>
						<el-table-column prop="shopName" :label="$t('opinion.Shop')" width="150" :formatter="formatShop"></el-table-column>
						<el-table-column prop="accountNo" :label="$t('opinion.Account')" width="150"></el-table-column>
						<el-table-column prop="accountName" :label="$t('opinion.AcountName')" width="150"></el-table-column>
						<el-table-column prop="role" :label="$t('opinion.Role')" width="150"></el-table-column>
						<el-table-column prop="theme" :label="$t('opinion.Subject')" width="150"></el-table-column>
						<el-table-column prop="detail" :label="$t('opinion.Content')" width="150"></el-table-column>
						<el-table-column fixed="right" class-name="animate_td handle-hidden-1">
					      	<template slot-scope="scope">
								<a class="svg-link-class" :title="$t('opinion.Suggestion')" @click="showFeed(scope.row)">
									<svg aria-hidden="true" class="svg-icon svg-action-icon"><use xlink:href="#icon-beizhu"></use></svg>
								</a>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</template>
		</div>

		<!-- 意见详情 -->
		<el-dialog :title="theme" :visible.sync="feedDialog" custom-class="custom-dialog" :lock-scroll=false :show-close=false width="400px" center :close-on-click-modal=false :modal-append-to-body="true" :append-to-body="true" class="el-dialog-add el-dialog-feed">
			<ul class="feed-ul">
				<li v-for="(item,index) in feedImgList" :key="index" @click="showBigImg(item)"><img :src="item" alt=""></li>
			</ul>
			<div class="content-box">
				<span v-text="content"></span>
			</div>

			<span slot="footer" class="dialog-footer remarks_footer">
				<button type="button" @click="feedDialog = false" class="footer_ok">
					<span> {{$t('button.Close')}} </span>
				</button>
			</span>
		</el-dialog>

		<!-- 显示大图 -->
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
  		
  		<div class="pagination-container">
    		<el-pagination :total="res.total" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="searchOpinionData.page" :page-sizes="[15,20,30, 50]" :page-size="searchOpinionData.pageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
  		</div>
	</div>
</template>

<script>
import { feedbackList,findOne } from 'api/opinion/index.js'
import XLSX from "xlsx";
import XLSX_SAVE from "file-saver";

	export default {
		name: 'opinion',
		data(){
			return {
			    res:[],
                searchOpinionData:{
                    page:1,
					pageSize:15,
					companyId:localStorage.getItem('companyId'),
				},
				searchInfo:'',
				opinionData:[],
				exportSearchData:{},
				tableIndex: null,
				theme:'',
				feedDialog:false,
				feedImgList:[],
				content:'',
				dialogVisible:false,
				dialogImageUrl:'',
                rorateFlag:true,
                degIndex:1,
                oldPage: null,
      			loading: true,
			}
		},
		watch:{
		  'searchOpinionData.page':function(newVal,oldVal){
		      this.oldPage = oldVal;
		  },
		},
		created () {
			this.searchInfo = this.$t('opinion.SuggestionList');

			this.getFeedList(this.searchOpinionData);
		},
		methods: { 
			showBigImg(url){
				this.dialogImageUrl = url;
          		this.dialogVisible = true;
			},
			formatShop(row){
				let shop = row.shopName;
				if( row.role == '管理员' ){
					return shop = '-';
				} else {
                    return shop;
                }
			},
			//显示意见详情
			showFeed(row){
                this.feedDialog = true;
                if( this.getStrL(row.theme) >40 ){
                    $('.el-dialog-feed .el-dialog__title').css('display','-webkit-box');
                }
				this.theme = row.theme;
                this.content = row.detail;
				if( row.imageUrl ){
                    this.feedImgList = row.imageUrl.split(',');
				}else{
					this.feedImgList = [];
				}
			},
			//查询意见列表
			getFeedList(data,str){
				const _that = this;
				feedbackList(data).then(res=>{
					this.opinionData = res.value.list;
					this.res = res.value;

					// 如果是分页触发，循环去除选中样式，对点击后的项数添加选中样式
					if( str == 'CurrentChange' ){
					  let obj = $('.el-pager .number');
					  for( let i = 0; i < obj.length; i++){
					      if($(obj[i]).html() == this.searchOpinionData.page) {
					        $(obj[i]).addClass('active');
					      } else {
					        $(obj[i]).removeClass('active');
					      }
					  }
					}

					setTimeout(function (param) { 
					  const td_last_child = $(".el-table__body-wrapper tr td:last-child");
					  for(let i=0;i<td_last_child.length;i++){
					    $(td_last_child[i]).removeClass('handle-hidden-1');
					  }

					  // 隐藏载入提示层
					  _that.loading = false;

					},500)
				})
			},
			showHandle(row, column, cell, event){
		      for(let i = 0;i<this.opinionData.length;i++){
		        if(this.opinionData[i].feedbackId === row.feedbackId){
		          this.tableIndex = i;
		          const table_row = $(".el-table__fixed-right").find('.el-table__row')[i];
		          $(table_row).find('td:last').removeClass('handle-hidden-1');
		          // $(".animate_td .cell").css("right","-120px");
		          $(".el-table__fixed-right").addClass("fixed-column-1");
		          // 判断项目数目是否导致滚动条出现
		          if(this.opinionData.length <= 15){
						$(".el-table__fixed-right").addClass("right-zero");
				  }else{
				  		$(".el-table__fixed-right").removeClass("right-zero");
				  }

		          $(".el-table__fixed-right").css("z-index","22");
		          var action_div = $(table_row).find('td:last').children("div");
		          $(action_div).stop().animate({"right": "0"});

		        }
		      }
		    },
		    hiddenHandle(row, column, cell, event){
		    	const table_row = $(".el-table__fixed-right").find('.el-table__row')[this.tableIndex];
		      	$(".el-table__fixed-right").css("z-index","0");
		    	var action_div = $(table_row).find('td:last').children("div");
		    	$(action_div).stop().animate({"right": "-120px"});
			},
			//刷新数据
			refresh(){
				const _that = this;
				if(this.rorateFlag){
					document.getElementById('refresh_icon').style.transform = 'rotate('+ this.degIndex * 360 +'deg)';
					this.handleFilter(1);
					this.rorateFlag = false;
					setTimeout(function (param) { _that.rorateFlag = true;_that.degIndex++; },1000);
				}
			},
			//点击搜索 查询
			handleFilter(sign,str) { 

				// 显示载入提示层
				this.loading = true;

				// sign 0 搜索 1其他
				if (sign === 0) this.searchInfo = this.$t("index.searchResults");
				//查询商户结算的参数
				this.exportSearchData = {};
				$.extend(this.exportSearchData, this.searchOpinionData);
				this.formatObj(this.exportSearchData);
				this.getFeedList(this.exportSearchData,str);

				if( str == 'CurrentChange' ){
				  // 获取所有分页项数，循环去除选中样式，对点击前的项数添加选中样式
				  let obj = $('.el-pager .number');
				  for( let i = 0; i < obj.length; i++){
				      if($(obj[i]).html() == this.oldPage) {
				        console.log(this.oldPage);
				        $(obj[i]).addClass('active');
				      } else {
				        $(obj[i]).removeClass('active');
				      }
				  }
				}

			},
			// 清空筛选条件
			delSelect() {
				this.searchOpinionData.startDate = null;
				this.searchOpinionData.endDate = null;
				this.searchOpinionData.page = 1;
				this.searchOpinionData.pageSize = 15;
				this.searchInfo = this.$t("opinion.SuggestionList");
				this.handleFilter(1);
			},
			hiddenHandle(row, column, cell, event){
				const table_row = $(".el-table__fixed-right").find('.el-table__row')[this.tableIndex];
				$(".el-table__fixed-right").css("z-index","0");
				var action_div = $(table_row).find('td:last').children("div");
				$(action_div).stop().animate({"right": "-120px"});
			},
			//pageSize 改变时会触发
			handleSizeChange(val) {
				this.searchOpinionData.pageSize = val;
				//		      console.log(this.listQuery);
				this.handleFilter(1);
			},
			//currentPage 改变时会触发
			handleCurrentChange(val) {
				this.searchOpinionData.page = val;
				this.handleFilter(1,'CurrentChange');
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]));
            },
            // 判断字符串长度的方法
            getStrL(str){
                let l = str.length; 
                let blen = 0; 
                for(let i=0; i<l; i++) { 
                    if ((str.charCodeAt(i) & 0xff00) != 0) { 
                    blen ++; 
                    } 
                    blen ++; 
                }
                return blen;
            },
		    formatObj(obj){
				let arr = Object.keys(obj);
				for(let i = 0;i<arr.length;i++){
					if(obj[arr[i]] === ''){
						obj[arr[i]] = null;
					}
				}
			},
		}
	}

</script>

<style scoped lang="scss">
.feed-ul{
	list-style: none;
	display: flex;
	padding: 0;
    justify-content: space-around;
	li{
		width: 110px;
		height: 110px;
		img{
			width: 100%;
			height: 100%;
		}
	}
}
.content-box{
	background:rgba(245,245,245,1);
	padding: 10px;
    color: #333;
    word-break: break-all;
}
.remarks_footer{
  padding-bottom: 20px;
  margin-top: -25px;
  .footer_ok{
    background: #5272E9;
    border-radius: 8px;
    border: none;
    color: #fff;
    width: 116px;
    height: 34px;
    font-size: 16px;
    font-weight: normal;
    outline: none;
  }
}
</style>